<{extend name="Public:public" /}>

<{block name="title"}>状态管理<{/block}>

<{block name="content"}> 
<div class="content guide with-sidebar state-management-guide">
  
    
      <div id="ad">
  <!-- <script
    async
    type="text/javascript"
    src="//cdn.carbonads.com/carbon.js?serve=CKYIK2QU&placement=vuejsorg"
    id="_carbonads_js">
  </script> -->
  <a href="https://studio.qcloud.coding.net/campaign/favorite-plugins/?utm_source=vue.js&amp;utm_content=ad1116" target="_blank">
    <img src="/images/coding-net-ad.jpg">
  </a>
</div>

    
  
  
    <h1>状态管理</h1>
  
  
    <h2 id="类-Flux-状态管理的官方实现"><a href="#类-Flux-状态管理的官方实现" class="headerlink" title="类 Flux 状态管理的官方实现" data-scroll="">类 Flux 状态管理的官方实现</a></h2><p>由于状态零散地分布在许多组件和组件之间的交互中，大型应用复杂度也经常逐渐增长。为了解决这个问题，Vue 提供 <a href="https://github.com/vuejs/vuex" target="_blank" rel="noopener">vuex</a>：我们有受到 Elm 启发的状态管理库。vuex 甚至集成到 <a href="https://github.com/vuejs/vue-devtools" target="_blank" rel="noopener">vue-devtools</a>，无需配置即可进行<a href="https://raw.githubusercontent.com/vuejs/vue-devtools/master/media/demo.gif" target="_blank" rel="noopener">时光旅行调试</a>。</p>
<h3 id="React-的开发者请参考以下信息"><a href="#React-的开发者请参考以下信息" class="headerlink" title="React 的开发者请参考以下信息" data-scroll="">React 的开发者请参考以下信息</a></h3><p>如果你是来自 React 的开发者，你可能会对 Vuex 和 <a href="https://github.com/reactjs/redux" target="_blank" rel="noopener">Redux</a> 间的差异表示关注，Redux 是 React 生态环境中最流行的 Flux 实现。Redux 事实上无法感知视图层，所以它能够轻松的通过一些<a href="https://yarnpkg.com/en/packages?q=redux%20vue&amp;p=1" target="_blank" rel="noopener">简单绑定</a>和 Vue 一起使用。Vuex 区别在于它是一个专门为 Vue 应用所设计。这使得它能够更好地和 Vue 进行整合，同时提供简洁的 API 和改善过的开发体验。</p>
<h2 id="简单状态管理起步使用"><a href="#简单状态管理起步使用" class="headerlink" title="简单状态管理起步使用" data-scroll="">简单状态管理起步使用</a></h2><p>经常被忽略的是，Vue 应用中原始<code>数据</code>对象的实际来源 - 当访问数据对象时，一个 Vue 实例只是简单的代理访问。所以，如果你有一处需要被多个实例间共享的状态，可以简单地通过维护一份数据来实现共享：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> sourceOfTruth = {}</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> vmA = <span class="keyword">new</span> Vue({</span><br><span class="line">  data: sourceOfTruth</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> vmB = <span class="keyword">new</span> Vue({</span><br><span class="line">  data: sourceOfTruth</span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure>
<p>现在当 <code>sourceOfTruth</code> 发生变化，<code>vmA</code> 和 <code>vmB</code> 都将自动的更新引用它们的视图。子组件们的每个实例也会通过 <code>this.$root.$data</code> 去访问。现在我们有了唯一的数据来源，但是，调试将会变为噩梦。任何时间，我们应用中的任何部分，在任何数据改变后，都不会留下变更过的记录。</p>
<p>为了解决这个问题，我们采用一个简单的 <strong>store 模式</strong>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> store = {</span><br><span class="line">  debug: <span class="literal">true</span>,</span><br><span class="line">  state: {</span><br><span class="line">    message: <span class="string">'Hello!'</span></span><br><span class="line">  },</span><br><span class="line">  setMessageAction (newValue) {</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">this</span>.debug) <span class="built_in">console</span>.log(<span class="string">'setMessageAction triggered with'</span>, newValue)</span><br><span class="line">    <span class="keyword">this</span>.state.message = newValue</span><br><span class="line">  },</span><br><span class="line">  clearMessageAction () {</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">this</span>.debug) <span class="built_in">console</span>.log(<span class="string">'clearMessageAction triggered'</span>)</span><br><span class="line">    <span class="keyword">this</span>.state.message = <span class="string">''</span></span><br><span class="line">  }</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>需要注意，所有 store 中 state 的改变，都放置在 store 自身的 action 中去管理。这种集中式状态管理能够被更容易地理解哪种类型的 mutation 将会发生，以及它们是如何被触发。当错误出现时，我们现在也会有一个 log 记录 bug 之前发生了什么。</p>
<p>此外，每个实例/组件仍然可以拥有和管理自己的私有状态：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> vmA = <span class="keyword">new</span> Vue({</span><br><span class="line">  data: {</span><br><span class="line">    privateState: {},</span><br><span class="line">    sharedState: store.state</span><br><span class="line">  }</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> vmB = <span class="keyword">new</span> Vue({</span><br><span class="line">  data: {</span><br><span class="line">    privateState: {},</span><br><span class="line">    sharedState: store.state</span><br><span class="line">  }</span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure>
<p><img src="/images/state.png" alt="状态管理"></p>
<p class="tip">重要的是，注意你不应该在 action 中 替换原始的状态对象 - 组件和 store 需要引用同一个共享对象，mutation 才能够被观察</p>

<p>接着我们继续延伸约定，组件不允许直接修改属于 store 实例的 state，而应执行 action 来分发 (dispatch) 事件通知 store 去改变，我们最终达成了 <a href="https://facebook.github.io/flux/" target="_blank" rel="noopener">Flux</a> 架构。这样约定的好处是，我们能够记录所有 store 中发生的 state 改变，同时实现能做到记录变更 (mutation)、保存状态快照、历史回滚/时光旅行的先进的调试工具。</p>
<p>说了一圈其实又回到了<a href="https://github.com/vuejs/vuex" target="_blank" rel="noopener">vuex</a>，如果你已经读到这儿，或许可以去尝试一下！</p>

  
  
    <div class="guide-links">
      
      
        <span>← <a href="/v2/guide/routing.html">路由</a></span>
      
      
      
        <span style="float: right;"><a href="/v2/guide/ssr.html">服务端渲染</a> →</span>
      
    </div>
  
  <div class="footer">
      <script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
<div class="bsa-cpc"></div>
<script>
  (function(){
    if(typeof _bsa !== 'undefined' && _bsa) {
    _bsa.init('default', 'CKYD62QM', 'placement:vuejsorg', {
      target: '.bsa-cpc',
      align: 'horizontal',
      disable_css: 'true'
    });
      }
  })();
</script>

    发现错误？想参与编辑？
    <a href="https://github.com/vuejs/cn.vuejs.org/blob/master/src/v2/guide/state-management.md" target="_blank">
      在 GitHub 上编辑此页！
    </a>
  </div>
</div>
<{/block}>
